<template>
    <el-row>
        <el-col offset="1" :span="20">
         <h1>病案</h1>
         <p>患者姓名：{{patient}}</p>
        </el-col>
    </el-row>
    <el-row>
        <el-col offset="1" :span="20">
            <el-tabs v-model="store.state.mrActiveTab" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="病案首页" name="recordIndex">
                    <!-- :rid="registerId"  父组件给子组件传值  在子组件中通过props来获取 -->
                    <RecordIndex :rid="registerId"></RecordIndex>
                </el-tab-pane>
                <el-tab-pane label="检查申请" name="checkRequest">
                    <CheckRequest :rid="registerId"></CheckRequest>
                </el-tab-pane>
                <el-tab-pane label="检查结果查看" name="checkResult">
                    <RequestShow :rid="registerId"></RequestShow>
                </el-tab-pane>
                <el-tab-pane label="门诊确诊" name="diagnosis">
                    <Diagnosis :rid="registerId"></Diagnosis>
                </el-tab-pane>
                <el-tab-pane label="开设处方" name="writepres">
                    <WritePres :rid="registerId"></WritePres>
                </el-tab-pane>
                <el-tab-pane label="费用查询" name="searchfee">
                    <Searchfee :rid="registerId"></Searchfee>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</template>

<script setup>
//引入http请求的通用方法
import httpRequest from '../../common/index.js';
import store from '@/store/index.js';
import { onMounted, ref, getCurrentInstance } from 'vue';
import { ElMessage,ElMessageBox,TabsPaneContext } from 'element-plus';
import RecordIndex from '@/components/outpatient/RecordIndex.vue';
import CheckRequest from '@/components/outpatient/CheckRequest.vue';
import Diagnosis from '@/components/outpatient/Diagnosis.vue';
import WritePres from '@/components/outpatient/WritePres.vue';
import Searchfee from '@/components/outpatient/Searchfee.vue';
import RequestShow from '@/components/outpatient/RequestShow.vue';

const {proxy} = getCurrentInstance();

//患者姓名
const patient = ref(null)

//挂号的id值
const registerId = ref(null)

//获取患者信息   挂号的id 和 姓名  main/outpatient/MedicalRecord/18/孙悟空  
//以上两个值都是通过路由传递的  所以从路由中获取即可
const getPatientInfo = ()=>{
    registerId.value = proxy.$route.params.rid; //获取路由中的挂号id
    patient.value = proxy.$route.params.realname; //获取路由中的患者姓名
}

onMounted(()=>{
    getPatientInfo(); //获取路由中的传参
})

//tab标签页中激活的面板
const activeName = ref('recordIndex');

const handleClick = (tab, event) => {
  console.log(tab, event);
}




</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>